<#include "../include/header.html">
<script type="text/javascript">
    var viewModel = Hap.createGridViewModel("#grid", {
        model: {},
        newResource: function (e) {
            var win = $('#newWin').kendoWindow({
                iframe: true,
                draggable: false,
                content: '${base.contextPath}/demo/demo_bank_branch.html',
            }).data('kendoWindow');
            win.title('<@spring.message "hap.new"/>');
            win.maximize().open();
        },

    });
</script>
<style>
    /*表格标题居中显示*/
    .k-grid th {
        text-align: center !important;
    }

    /*表格列居中*/
    .k-grid tr {
        text-align: center !important;
    }
</style>
<body>
<script src="${base.contextPath}/common/code?bankTypeData=HBI.DEMO.BANK_TYPE" type="text/javascript"></script>
<div id="page-content">
    <div class="panel" id="query-form" style="padding-bottom:10px;">
        <form class="form-horizontal" id="myForm">
            <div class="panel-body">
                <div class="row">
                    <!--银行简码 文本-->
                    <div class="col-xs-4">
                        <div class="form-group">
                            <label for="bankCode" class="col-md-4 control-label"><@spring.message
                                "银行简码"/></label>
                            <div class="col-xs-8">
                                <input id="bankCode" type="text" data-role="maskedtextbox"
                                       style="float:left;width:150px;margin-right:5px;" data-bind="value:model.bankCode"
                                       class="k-textbox" required data-required-msg="电话为必填">
                            </div>
                        </div>
                    </div>
                    <!--银行名称 LOV-->
                    <div class="col-xs-4">
                        <div class="form-group">
                            <label for="bankName" class="col-md-4 control-label"><@spring.message
                                "银行名称"/></label>
                            <div class="col-xs-8">
                                <input id="bankName" type="text" style="width:150px;margin-right:5px;"
                                       data-bind="value:model.bankName,text:model.bankName">
                                <script>
                                    $("#bankName").kendoLov($.extend(${lovProvider.getLov(base.contextPath, base.locale, "HBI_DEMO_BANK_NAME")}, {}))
                                </script>
                            </div>
                        </div>
                    </div>
                    <!--银行类型 下拉框-->
                    <div class="col-xs-4">
                        <div class="form-group">
                            <label class="col-md-4 control-label"><@spring.message
                                "hbi.demo.bank.bankType"/></label>
                            <div class="col-xs-8">
                                <input id="bankType" required type="text" style="width:150px;margin-right:5px;"
                                       data-bind="value:model.bankType">
                            </div>
                            <script>
                                $("#bankType").kendoComboBox({
                                    dataSource: bankTypeData,
                                    valuePrimitive: true,
                                    dataTextField: "meaning",
                                    dataValueField: "value"
                                });
                            </script>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <!--截止时间 日期-->
                    <div class="col-xs-4">
                        <div class="form-group">
                            <label class="col-md-4 control-label"><@spring.message
                                "截止日期"/></label>
                            <div class="col-xs-8">
                                <input id="expirationDate" style="width:150px;margin-right:5px;"
                                       databind="value:model.expirationDate">
                            </div>
                            <script>
                                $("#expirationDate").kendoDatePicker({
                                    format: "{0:yyyy-MM-dd}",
                                }).data("kendoDatePicker");
                            </script>
                        </div>
                    </div>
                    <div class="col-xs-4">
                        <div class="form-group">
                            <label class="col-md-4 control-label"><@spring.message
                                "描述"/></label>
                            <div class="col-xs-8">
                                <input id="description" type="text" data-role="maskedtextbox"
                                       style="float:left;width:150px;margin-right:5px;"
                                       data-bind="value:model.description"
                                       class="k-textbox" required>
                                <div style="position: absolute;z-index: 2;left: 90%;top: -2px">
                                    <span data-for="description" class="k-invalid-msg"></span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-xs-4">
                        <div class="form-group">
                            <label class="col-md-4 control-label"><@spring.message
                                "备注"/></label>
                            <div class="col-xs-8">
                                <input id="comments" type="text" data-role="maskedtextbox"
                                       style="float:left;width:150px;margin-right:5px;" data-bind="value:model.comments"
                                       class="k-textbox" required>
                                <div style="position: absolute;z-index: 2;left: 90%;top: -2px">
                                    <span data-for="comments" class="k-invalid-msg"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-4">
                    <span id="k-grid-add" class="btn btn-primary k-grid-add" style="float:left;margin-right:5px;"
                          data-bind="click:newResource"><@spring.message "hap.new"/></span>
                    <span id="k-grid-remove" data-bind="click:remove" class="btn btn-danger"
                          style="float:left;margin-right:3px;"><@spring.message "hap.delete"/></span>
                    <span id="k-gridd-exce" class="btn btn-primary" onclick="excelData()">
        <i class="fa fa-file-excel-o" ></i>导出全部数据
        </span>
                </div>
                <div class="col-xs-4"></div>
                <div class="col-xs-4">
                     <span id="myForm_reset" class="btn btn-default pull-right" type="button" data-bind="click:reset">
                         <i class="fa fa-eraser" style="margin-right: 3px;"></i>
                         <@spring.message "hap.reset"/>
                     </span>
                    <span id="myForm_query"class="btn btn-primary pull-right" data-bind="click:query" type="submit"
                          style="margin-right: 3px;">
                        <i class="fa fa-search"></i>
                        <@spring.message "hap.query"/>
                    </span>
                </div>
                <script>kendo.bind($('#toolbar-btn'), viewModel);</script>
            </div>
        </form>

    </div>

    <script>kendo.bind($('#query-form'), viewModel);</script>

    <div id="newWin" style="display: none"></div>
    <div style="clear:both">
        <div id="grid"></div>
    </div>
</div>

<script type="text/javascript">
    Hap.initEnterQuery('#query-form', viewModel.query);
    var BaseUrl = _basePath;
    dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: BaseUrl + "/hbi/demo/bank/query",
                type: "POST",
                dataType: "json"
            },
            update: {
                url: BaseUrl + "/hbi/demo/bank/submit",
                type: "POST",
                contentType: "application/json"
            },
            destroy: {
                url: BaseUrl + "/hbi/demo/bank/remove",
                type: "POST",
                contentType: "application/json"
            },
            create: {
                url: BaseUrl + "/hbi/demo/bank/submit",
                type: "POST",
                contentType: "application/json"
            },
            parameterMap: function (options, type) {
                if (type !== "read" && options.models) {
                    var datas = Hap.prepareSubmitParameter(options, type)
                    return kendo.stringify(datas);
                } else if (type === "read") {
                    return Hap.prepareQueryParameter(viewModel.model.toJSON(), options)
                }
            }
        },
        batch: true,
        serverPaging: true,
        pageSize: 10,
        schema: {
            data: 'rows',
            total: 'total',
            model: {
                id: "bankId",
                fields: {}
            }
        }
    });

    $("#grid").kendoGrid({
        dataSource: dataSource,
        resizable: true,
        scrollable: true,
        navigatable: false,
        selectable: 'multiple, rowbox',
        dataBound: function () {
            if (parent.autoResizeIframe) {
                parent.autoResizeIframe('${RequestParameters.functionCode!}')
            }
        },
        pageable: {
            pageSizes: [5, 10, 20, 50],
            refresh: true,
            buttonCount: 5
        },
        columns: [
            {
                field: "",
                title: '<@spring.message "操作"/>',
                width: 120,
                template: function (dataItem) {
                    var html = '<a class="k-grid-column-view" href="javascript:void(0)" onclick="view(' + dataItem.bankId + ')" style="text-decoration: underline; color: blue; cursor: pointer;float: left; margin-right: 10px;"><@spring.message "hap.view"/></a>' +
                        '<a class="k-grid-column-edit" href="javascript:void(0)" onclick="edit(' + dataItem.bankId + ')" style="text-decoration: underline; color: blue; cursor: pointer;float: left; margin-right: 10px;"><@spring.message "hap.edit"/></a>';
                    return html;
                }

            },
            {
                field: "bankId",
                title: '<@spring.message "hbi.demo.bank.bankid"/>',
                width: 120
            },
            {
                field: "bankCode",
                title: '<@spring.message "hbi.demo.bank.bankcode"/>',
                width: 120
            },
            {
                field: "bankName",
                title: '<@spring.message "hbi.demo.bank.bankname"/>',
                width: 120
            },
            {
                field: "bankType",
                title: '<@spring.message "hbi.demo.bank.banktype"/>',
                width: 120,
                template: function (dataItem) {
                    var v = dataItem.bankType;
                    $.each(bankTypeData, function (i, n) {
                        if ((n.value || '').toLowerCase() == (v || '').toLowerCase()) {
                            v = n.meaning;
                            return false;
                        }
                    });
                    return v;
                },

            },
            {
                field: "description",
                title: '<@spring.message "hbi.demo.bank.description"/>',
                width: 120
            },
            {
                field: "expirationDate",
                title: '<@spring.message "hbi.demo.bank.expirationdate"/>',
                width: 120
            },
            {
                field: "comments",
                title: '<@spring.message "hbi.demo.bank.comments"/>',
                width: 120
            },
        ],
        editable: false
    });

    lineDataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: BaseUrl + "/hbi/demo/bank/branch/query",
                type: "POST",
                dataType: "json",

            },
            update: {
                url: BaseUrl + "/hbi/demo/bank/branch/mySubmit",
                type: "POST",
                contentType: "application/json"
            },
            destroy: {
                url: BaseUrl + "/hbi/demo/bank/branch/remove",
                type: "POST",
                contentType: "application/json"
            },
            create: {
                url: BaseUrl + "/hbi/demo/bank/branch/mySubmit",
                type: "POST",
                contentType: "application/json",
                data: {
                    bankHead: viewModel.model
                }
            },
            parameterMap: function (options, type) {
                if (type !== "read" && options.models) {
                    var datas = Hap.prepareSubmitParameter(options, type)
                    return kendo.stringify(datas);
                } else if (type === "read") {
                    return Hap.prepareQueryParameter(viewModel.model.toJSON(), options)
                }
            }
        },
        batch: true,
        serverPaging: true,
        pageSize: 10,
        schema: {
            data: 'rows',
            total: 'total',
            model: {
                id: "bankBranchId",
                fields: {
                    branchName: {validation: {required: true}},
                    branchType: {validation: {required: true}},
                    branchNo: {validation: {required: true}},
                    address: {validation: {required: true}},
                }
            }
        }

    });
    function detailInit(e) {
        var data = [];
        lineDataSource.fetch(function () {
            //过滤数据
            data = lineDataSource.data().filter(function (item) {
                return item.branchId == e.data.branchId;
            });
            $("<div/>").appendTo(e.detailCell).kendoGrid({
                dataSource: data,
                columns: [
                    {field: "branchId"},
                    {field: "branchName"},
                    {field: "branchType"},
                    {field: "branchNo"},
                    {field: "address"},
                ]
            });
        });

        function excelData() {
            //头标题

            var headerTitle = ['<@spring.message "银行ID"/>', '<@spring.message "银行代码"/>', '<@spring.message "银行名称"/>', '<@spring.message "银行类型"/>', '<@spring.message "银行描述"/>', '<@spring.message "有效期"/>', '<@spring.message "注释"/>'];

            var headerExcelTitle = [];
            //行标题
            var lineTitle = ['<@spring.message "分行名称"/>', '<@spring.message "分行类型"/>', '<@spring.message "联行号"/>', '<@spring.message "地址"/>', '<@spring.message "说明"/>', '<@spring.message "截止日期"/>', '<@spring.message "备注"/>'];

            var lineExcelTitle = [];

            //头数据
            var headerData = headerDataSource.data();

            //最终导出数据
            var excelData = [];

            for (var i in headerTitle) {
                headerExcelTitle.push({
                    value: headerTitle[i],                  //标题文字
                    background: '#92cddc',                 //标题背景颜色
                    color: '#000',                         //标题字体颜色
                    textAlign: 'center',                     //文字水平对齐方式
                    verticalAlign: 'center',                  //文字竖直对齐方式
                    borderLeft: {size: 1, color: "#ddd"},       //左边框大小及颜色
                    borderRight: {size: 1, color: "#ddd"},      //右边框大小及颜色
                    borderBottom: {size: 1, color: "#ddd"},   //下边框大小及颜色
                    borderTop: {size: 1, color: "#ddd"},      //上边框大小及颜色
                });
            }

            //插入空对象用于空格
            lineExcelTitle.push({});
            for (var i in lineTitle) {
                lineExcelTitle.push({
                    value: lineTitle[i],                  //标题文字
                    background: '#92cddc',                 //标题背景颜色
                    color: '#000',                         //标题字体颜色
                    textAlign: 'center',                     //文字水平对齐方式
                    verticalAlign: 'center',                  //文字竖直对齐方式
                    borderLeft: {size: 1, color: "#ddd"},       //左边框大小及颜色
                    borderRight: {size: 1, color: "#ddd"},      //右边框大小及颜色
                    borderBottom: {size: 1, color: "#ddd"},   //下边框大小及颜色
                    borderTop: {size: 1, color: "#ddd"},      //上边框大小及颜色
                });
            }

            for (var i = 0; i < headerData.length; i++) {
                //插入头数据
                excelData.push(
                    //插入头标题
                    {cells: headerExcelTitle},
                    {
                        cells: [
                            {
                                value:  headerData[i].bankId,
                                borderBottom: {size: 1, color: "#ddd"},
                                borderRight: {size: 1, color: "#ddd"},
                                verticalAlign: 'center',
                                textAlign: 'center',
                                background: '#ff9'
                            },
                            {
                                value: headerData[i].bankCode,
                                verticalAlign: 'center',
                                textAlign: 'center'/* background: '#FFF19E' */
                            },
                            {
                                value: headerData[i].bankName,
                                verticalAlign: 'center',
                                textAlign: 'center'/* background: '#FFF19E' */
                            },
                            {
                                value: headerData[i].bankType,
                                verticalAlign: 'center',
                                textAlign: 'center'/* background: '#FFF19E' */
                            },
                            {
                                value: headerData[i].description,
                                verticalAlign: 'center',
                                textAlign: 'center'/* background: '#FFF19E' */
                            },

                            {
                                value: headerData[i].expirationdate,
                                verticalAlign: 'center',
                                textAlign: 'center'/* background: '#FFF19E' */
                            },
                            {
                                value: headerData[i].comments,
                                verticalAlign: 'center',
                                textAlign: 'center'/* background: '#FFF19E' */
                            }
                        ],

                    });

                lineDataSource.fetch(function () {
                    //过滤数据
                    var lineData = lineDataSource.data().filter(function (item) {
                        return item.headerId == headerData[i].headerId;
                    });
                    //插入行标题
                    excelData.push({cells: lineExcelTitle});
                    //插入行数据
                    for (var j = 0; j < lineData.length; j++) {
                        excelData.push({

                            cells: [
                                {
                                    value: lineData[j].branchName,
                                    borderBottom: {size: 1, color: "#ddd"},
                                    borderRight: {size: 1, color: "#ddd"},
                                    verticalAlign: 'center',
                                    textAlign: 'center',
                                    background: '#ff9'
                                },
                                {
                                    value: lineData[j].branchType,
                                    verticalAlign: 'center',
                                    textAlign: 'center'/* background: '#FFF19E' */
                                },
                                {
                                    value: lineData[j].branchNo,
                                    verticalAlign: 'center',
                                    textAlign: 'center'/* background: '#FFF19E' */
                                },
                                {
                                    value: lineData[j].swiftCode,
                                    verticalAlign: 'center',
                                    textAlign: 'center'/* background: '#FFF19E' */
                                },
                                {
                                    value: lineData[j].address,
                                    verticalAlign: 'center',
                                    textAlign: 'center'/* background: '#FFF19E' */
                                },
                                {
                                    value: lineData[j].description,
                                    verticalAlign: 'center',
                                    textAlign: 'center'/* background: '#FFF19E' */
                                },
                                {
                                    value: lineData[j].expirationDate,
                                    verticalAlign: 'center',
                                    textAlign: 'center'/* background: '#FFF19E' */
                                },
                                {
                                    value: lineData[j].comments,
                                    verticalAlign: 'center',
                                    textAlign: 'center'/* background: '#FFF19E' */
                                }
                            ],

                        });
                    }
                });

            }

            //2.2.3设置列宽度与样式
            var columns = [];
            for (var i = 0; i < Math.max(headerExcelTitle.length, lineExcelTitle.length); i++) {
                columns.push({width: 200});
            }

            var workbook = new kendo.ooxml.Workbook({
                date: new Date(),
                sheets: [
                    {
                        name: '头行导出测试',       //sheet 名称
                        columns: columns,      //列
                        rows: excelData  //数据
                    }
                ]
            });

            kendo.saveAs({
                dataURI: workbook.toDataURL(), //数据源
                fileName: '头行导出测试' //文件名
            });

        }

        //点击查看按钮
        function view(bankId) {
            var win = $("#newWin").kendoWindow({
                iframe: true,
                draggable: false,
                content: '${base.contextPath}/demo/demo_bank_branch.html?queryFlag=1&bankId=' + bankId,
            }).data('kendoWindow');
            win.title('<@spring.message "查看"/>');
            win.maximize().open();
        }

        //点击编辑按钮
        function edit(bankId) {
            var win = $("#newWin").kendoWindow({
                iframe: true,
                draggable: false,
                content: '${base.contextPath}/demo/demo_bank_branch.html?queryFlag=2&bankId=' + bankId,
            }).data('kendoWindow');
            win.title('<@spring.message "编辑"/>');
            win.maximize().open();
        }


        function exportFunction() {
            var orginData = dataSource.data();
            excelData(orginData);
        }

        // function excelData(originData) {
        //
        //     /**
        //      * 1.修改源数据
        //      * 修改源数据中需要转换的值，如快码字段("Y"->"是","N"->"否")，时间格式等
        //      */
        //     if (originData.length > 0) { //如果有选中数据则导出数据
        //         for (var i in originData) {
        //             //时间转换
        //             originData[i].expirationDate = kendo.toString(kendo.parseDate(originData[i].expirationDate), "yyyy-MM-dd HH:mm:ss");
        //
        //             var v = originData[i].bankType;
        //             $.each(bankTypeData, function (i, n) {
        //                 if ((n.value || '').toLowerCase() == (v || '').toLowerCase()) {
        //                     v = n.meaning;
        //                     originData[i].bankType = v;
        //                 }
        //             })
        //         }
        //     } else {
        //         return;
        //     }
        //
        //     /**
        //      * 2.设置excel格式与内容
        //      */
        //
        //     /**
        //      * 2.1设置excel表格标题
        //      */
        //     var excelTitles = ['<@spring.message "银行ID"/>', '<@spring.message "银行代码"/>', '<@spring.message "银行名称"/>', '<@spring.message "银行类型"/>', '<@spring.message "银行描述"/>', '<@spring.message "有效期"/>', '<@spring.message "注释"/>'];
        //     //标题数组 	SwiftCode
        //     var excelHeader = [];
        //     for (var i in excelTitles) {
        //         excelHeader.push({
        //             value: excelTitles[i],                    //标题文字
        //             background: '#92cddc',                    //标题背景颜色
        //             color: '#000',                            //标题字体颜色
        //             textAlign: 'center',                      //文字水平对齐方式
        //             verticalAlign: 'center',                  //文字竖直对齐方式
        //             borderLeft: {size: 1, color: "#ddd"},       //左边框大小及颜色
        //             borderRight: {size: 1, color: "#ddd"},      //右边框大小及颜色
        //             borderBottom: {size: 1, color: "#ddd"},   //下边框大小及颜色
        //             borderTop: {size: 1, color: "#ddd"},      //上边框大小及颜色
        //         })
        //     }
        //
        //     /**
        //      * 2.2设置最终导出数据
        //      */
        //         //最终导出数据
        //     var excelData = [];
        //     //2.2.1将标题添加至导出数据
        //     excelData.push({
        //         cells: excelHeader
        //     });
        //     //2.2.2将源数据添加至导出数据
        //     for (var i = 0; i < originData.length; i++) {
        //         excelData.push({
        //             cells: [
        //                 {
        //                     value: originData[i].bankId,
        //                     borderBottom: {size: 1, color: "#ddd"},
        //                     borderRight: {size: 1, color: "#ddd"},
        //                     verticalAlign: 'center',
        //                     textAlign: 'center',
        //                     background: '#ff9'
        //                 },
        //                 {
        //                     value: originData[i].bankCode,
        //                     verticalAlign: 'center',
        //                     textAlign: 'center'/* background: '#FFF19E' */
        //                 },
        //                 {
        //                     value: originData[i].bankName,
        //                     verticalAlign: 'center',
        //                     textAlign: 'center'/* background: '#FFF19E' */
        //                 },
        //                 {
        //                     value: originData[i].bankType,
        //                     verticalAlign: 'center',
        //                     textAlign: 'center'/* background: '#FFF19E' */
        //                 },
        //                 {
        //                     value: originData[i].description,
        //                     verticalAlign: 'center',
        //                     textAlign: 'center'/* background: '#FFF19E' */
        //                 },
        //
        //                 {
        //                     value: originData[i].expirationdate,
        //                     verticalAlign: 'center',
        //                     textAlign: 'center'/* background: '#FFF19E' */
        //                 },
        //                 {
        //                     value: originData[i].comments,
        //                     verticalAlign: 'center',
        //                     textAlign: 'center'/* background: '#FFF19E' */
        //                 }
        //             ],
        //         });
        //     }
        //     //2.2.3设置列宽度与样式
        //     var columns = [];
        //     for (var i = 0; i < excelTitles.length; i++) {
        //         columns.push({width: 150});
        //     }
        //
        //     /**
        //      * 3.配置导出excel sheets,格式与文件名
        //      */
        //     var workbook = new kendo.ooxml.Workbook({
        //         date: new Date(),
        //         sheets: [ // sheet数组，如需导出多个sheet在此完成
        //             {
        //                 name: '银行数据',       //sheet 名称
        //                 frozenRows: 1,         //冻结第一行
        //                 frozenColumns: 1,      //冻结第一列
        //                 columns: columns,      //列
        //                 rows: excelData        //数据
        //             }
        //         ]
        //     });
        //
        //     //设置文件名
        //     kendo.saveAs({
        //         dataURI: workbook.toDataURL(), //数据源
        //         fileName: '银行导出测试' //文件名
        //     });
        // }
    }

</script>
</body>
</html>